import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import { phoneLogin, validatePhone, validatePassword } from '../../services/authService';
import './LoginTest.css';

function LoginTest() {
  const navigate = useNavigate();
  const { login } = useAuth();
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    // 验证手机号格式
    if (!validatePhone(phone)) {
      setMessage('请输入正确的11位手机号格式（以1开头）');
      setLoading(false);
      return;
    }

    // 验证密码格式
    if (!validatePassword(password)) {
      setMessage('密码长度至少6位');
      setLoading(false);
      return;
    }

    try {
      const response = await phoneLogin(phone, password);

      if (response.success && response.userInfo) {
        setMessage('登录成功，正在跳转...');
        login(response.userInfo);
        
        setTimeout(() => {
          navigate('/home');
        }, 1500);
      } else {
        setMessage(response.message);
      }
    } catch (error) {
      console.error('登录失败:', error);
      setMessage('登录失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleQuickLogin = (testPhone: string, testPassword: string) => {
    setPhone(testPhone);
    setPassword(testPassword);
  };

  return (
    <div className="login-test">
      <div className="test-container">
        <h1>登录测试页面</h1>
        
        <div className="test-accounts">
          <h3>测试账号</h3>
          <div className="account-buttons">
            <button 
              className="account-btn admin"
              onClick={() => handleQuickLogin('11111111111', 'admin123')}
            >
              管理员登录
            </button>
            <button 
              className="account-btn user"
              onClick={() => handleQuickLogin('12222222222', 'user123')}
            >
              普通用户登录
            </button>
          </div>
        </div>

        <form className="login-form" onSubmit={handleLogin}>
          <div className="input-group">
            <label>手机号</label>
            <input
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              placeholder="请输入11位手机号"
              maxLength={11}
              pattern="[0-9]{11}"
              required
            />
          </div>
          
          <div className="input-group">
            <label>密码</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
              required
            />
          </div>
          
          <button 
            type="submit" 
            className="login-btn"
            disabled={loading}
          >
            {loading ? '登录中...' : '登录'}
          </button>
        </form>

        {message && (
          <div className={`message ${message.includes('成功') ? 'success' : 'error'}`}>
            {message}
          </div>
        )}

        <div className="test-info">
          <h3>测试说明</h3>
          <ul>
            <li>管理员账号可以访问所有页面</li>
            <li>普通用户只能访问创作页面</li>
            <li>登录后可以在侧边栏看到用户信息</li>
            <li>可以测试权限控制功能</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default LoginTest; 